<template>
  <div class="weath-container">
    <div class="weather-button" @click="handleActive('ship')">船舶分类</div>
    <div class="weather-button" @click="handleActive('radar')">雷达操作</div>
    <div class="weather-button" @click="handleActive('weather')">气象设置</div>
    <div class="weather-button" @click="handleActive('wind')">风力设置</div>
    <!-- 船舶显示 -->
    <div
      class="radar-content"
      style="bottom: 120px"
      v-if="activeType === 'ship'"
    >
      <div
        class="item"
        v-for="(item, index) in shipList"
        :key="index"
        :class="{ active: shipActive === item.value }"
        @click="handleShip(item, index)"
      >
        <p>{{ item.label }}</p>
      </div>
    </div>
    <!-- 雷达操作 -->
    <div
      class="radar-content"
      style="bottom: 90px"
      v-if="activeType === 'radar'"
    >
      <div
        class="item"
        v-for="(item, index) in radarList"
        :key="index"
        :class="{ active: item.active() }"
        @click="handleRadar(item, index)"
      >
        <p>{{ item.label }}</p>
      </div>
    </div>
    <!-- 气象 -->
    <div class="weather-content" v-if="activeType === 'weather'">
      <div
        class="item"
        v-for="(item, index) in weatherList"
        :key="index"
        :class="{ active: active === index }"
        @click="handleSelect(item, index)"
      >
        <i class="iconfont" :class="item.icon"></i>
        <p>{{ item.label }}</p>
      </div>
    </div>
    <!-- 风 -->
    <div class="wind-content" v-if="activeType === 'wind'">
      <div class="number">{{ wind }}</div>
      <el-slider
        v-model="wind"
        vertical
        :step="1"
        show-stops
        :max="18"
        height="250px"
      >
      </el-slider>
    </div>
  </div>
</template>

<script>
// import { setWeather } from "@/api/apra";
export default {
  data() {
    return {
      weatherList: [
        {
          label: "晴",
          value: 0,
          icon: "icon-test-qing",
        },
        {
          label: "小雨",
          value: 1,
          icon: "icon-test-xiaoyu",
        },
        {
          label: "中雨",
          value: 2,
          icon: "icon-test-zhongyu",
        },
        {
          label: "大雨",
          value: 3,
          icon: "icon-test-dayu",
        },
        {
          label: "暴雨",
          value: 4,
          icon: "icon-test-baoyu",
        },
        {
          label: "大暴雨",
          value: 5,
          icon: "icon-test-d-baoyuzhuandabaoyu",
        },
        {
          label: "特大暴雨",
          value: 6,
          icon: "icon-test-tedabaoyu",
        },
      ],
      shipList: [
        {
          label: "仅AIS",
          value: 1,
        },
        {
          label: "仅ARPA",
          value: 0,
        },
        {
          label: "融合前",
          value: 3,
        },
        {
          label: "融合后",
          value: 2,
        },
      ],
      active: 0,
      wind: 0,
      activeType: "",
      windTime: null,
      radarType: 0,
      isRange: 0,
      isWave: 1,
      isArea: 0,
      shipActive: "",
      isRemoveClutter: 0,
    };
  },
  computed: {
    radarList() {
      return [
        {
          label: "去除杂波",
          value: 1,
          fn: () => {
            this.isRemoveClutter = this.isRemoveClutter === 0 ? 1 : 0;
            this.$emit("changeRadar");
          },
          active: () => {
            if (this.isRemoveClutter === 1) {
              return true;
            } else {
              return false;
            }
          },
        },
        {
          label: "去除岸基",
          value: 1,
          fn: () => {
            this.radarType = this.radarType === 0 ? 1 : 0;
            this.$emit("changeRadar");
          },
          active: () => {
            if (this.radarType === 1) {
              return true;
            } else {
              return false;
            }
          },
        },
        {
          label: "范围显示",
          value: 2,
          fn: () => {
            this.isRange = this.isRange === 0 ? 1 : 0;
            this.$emit("changeBaseRadar");
          },
          active: () => {
            if (this.isRange === 1) {
              return true;
            } else {
              return false;
            }
          },
        },
        {
          label: "禁射区显示",
          value: 0,
          fn: () => {
            this.isArea = this.isArea === 0 ? 1 : 0;
            this.$emit("changeBaseRadar");
          },
          active: () => {
            if (this.isArea === 1) {
              return true;
            } else {
              return false;
            }
          },
        },
        {
          label: "回波显示",
          value: 3,
          fn: () => {
            this.isWave = this.isWave === 0 ? 1 : 0;
            this.$emit("changeWaveRadar");
          },
          active: () => {
            if (this.isWave === 1) {
              return true;
            } else {
              return false;
            }
          },
        },
      ];
    },
  },
  methods: {
    handleSelect(row, index) {
      this.active = index;
      // setWeather({ weather: row.value }).then(() => {});
    },
    handleActive(type) {
      if (this.activeType === type) {
        this.activeType = "";
      } else {
        this.activeType = type;
      }
    },
    handleRadar(row) {
      row.fn();
    },
    handleShip(row) {
      if (this.shipActive === row.value) {
        this.shipActive = "";
      } else {
        this.shipActive = row.value;
      }
      this.$emit("changeShip");
    },
  },
  watch: {
    wind() {
      if (this.windTime) {
        clearTimeout(this.windTime);
      }
      this.windTime = setTimeout(() => {
        this.$emit("changeRadar");
      }, 1500);
    },
    active() {
      this.$emit("changeRadar");
    },
  },
};
</script>

<style scoped lang="scss">
.weath-container {
  position: absolute;
  bottom: 60px;
  left: 20px;
  .weather-button {
    background-color: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 3px;
    cursor: pointer;
  }
}
.radar-content {
  position: fixed;
  bottom: 60px;
  left: 130px;
  background-color: #fff;
  border-radius: 3px;
  .item {
    display: flex;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    &:hover {
      color: #0255a5;
    }
    &:last-of-type {
      border-bottom: 0;
    }
    i {
      width: 20px;
      font-size: 20px;
    }
    p {
      margin: 0 0 0 0;
    }
  }
  .active {
    background-color: #0255a5;
    color: #fff;
    &:hover {
      color: #fff;
    }
  }
}
.weather-content {
  position: fixed;
  bottom: 60px;
  left: 130px;
  background-color: #fff;
  border-radius: 3px;
  .item {
    display: flex;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    &:hover {
      color: #0255a5;
    }
    &:last-of-type {
      border-bottom: 0;
    }
    i {
      width: 20px;
      font-size: 20px;
    }
    p {
      margin: 0 0 0 10px;
    }
  }
  .active {
    background-color: #0255a5;
    color: #fff;
    &:hover {
      color: #fff;
    }
  }
}
.wind-content {
  position: fixed;
  bottom: 60px;
  left: 130px;
  height: 320px;
  background-color: #fff;
  border-radius: 3px;
  padding: 15px 10px;
  .number {
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
  }
}
</style>
